<template>
    <div class="echart">
        <!-- 这个 div 就会被解析为 echarts 图 -->
        <div class="barChart" ref="barChart"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    props: {
        zaiyun: {
            type: Object,
            default: () => {
                return { name: "", data: [] };
            },
        },
        xinzeng: {
            type: Object,
            default: () => {
                return { name: "", data: [] };
            },
        },
    },
    mounted() {
        this.initBarChart();
    },
    methods: {
        initBarChart() {
            // 初始化 echarts 实例，并将其绑定到 this.$refs.barChart 上
            let myChart = echarts.init(this.$refs.barChart);

            // echarts 图表的配置项
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                grid: {
                    //调整图表位置
                    // show: false, //是否显示直角坐标系网格
                    containLabel: true,
                    top: "15%", // 一下数值可为百分比也可为具体像素值
                    right: "5%",
                    bottom: "10%",
                    left: "8%",
                },
                legend: {
                    top: "5%", // 控制板块控制器的位置
                    // icon: 'rect',//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
                    // itemWidth: 10,  // 设置宽度
                    // itemHeight: 4, // 设置高度
                    itemGap: 80, // 设置顶部图标间距
                    right: "center",
                    data: [
                        {
                            name: this.zaiyun.name,
                        },
                        {
                            name: this.xinzeng.name,
                        },
                    ],
                },
                xAxis: [
                    {
                        type: "category",
                        data: [
                            "1月",
                            "2月",
                            "3月",
                            "4月",
                            "5月",
                            "6月",
                            "7月",
                            "8月",
                            "9月",
                            "10月",
                            "11月",
                            "12月",
                        ],
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#000",
                                type: "solid",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                color: "#000",
                            },
                        },
                    },
                ],
                yAxis: [
                    {
                        type: "value",
                        nameTextStyle: {
                            align: "right",
                        },
                        alignTicks: true,
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            formatter: (params) => {
                                return params;
                            },
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "#666666",
                                width: 1,
                                type: "solid",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "#cccccc",
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: this.zaiyun.name,
                        type: "bar",
                        barWidth: "25%", // 设置柱子的宽度
                        barGap: 1,
                        stack: "柱子", // 同个类目轴上系列配置相同的 stack 值可以堆叠放置
                        data: this.zaiyun.data,
                        itemStyle: {
                            normal: {
                                color: "#4fa8a4",
                            },
                        },
                    },
                    {
                        name: this.xinzeng.name,
                        type: "bar",
                        barWidth: "25%", // 设置柱子的宽度
                        barGap: 1,
                        stack: "柱子", // 同个类目轴上系列配置相同的 stack 值可以堆叠放置
                        data: this.xinzeng.data,
                        itemStyle: {
                            normal: {
                                color: "#34c1f0",
                            },
                        },
                    },
                ],
            };

            // 使用配置项初始化 echarts 图表
            myChart.setOption(option);
        },
    },
};
</script>

<style scoped lang="less">
.echart {
    width: 800px;
    height: 400px;
    margin: auto;
    // border: 3px solid lightcoral;
    background-color: #fff;

    //  宽高是必须给的，可以给百分比、具体的像素等....
    .barChart {
        width: 800px;
        height: 400px;
    }
}
</style>
